<template>
  <div id="air-radar">
    <div class="row">
      <div class="col col-1">
        <div class="row">
          <scan-map></scan-map>
        </div>
      </div>
      <div class="col col-2">
        <div class="row">
          <lidar-scan></lidar-scan>
        </div>
      </div>
      <div class="col col-3">
        <div class="row">
          <sailing-scan></sailing-scan>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import scanMap from "./scanMap";
import lidarScan from "./lidarScan";
import sailingScan from "./sailingScan";

export default {
  components: {
    scanMap,
    lidarScan,
    sailingScan
  }
};
</script>

<style lang="stylus" scoped>
#air-radar
    position relative
    width 100%
    height 100%

    > .row
        margin-left 390px
        height 100%

        > .col
            height 100%

            > .row
                height 100%
                padding 0 40px

        > .col
            width 1790px

#air-radar::before
    content ''
    position absolute
    top 0
    left 0
    width 5760px
    height 100%
    background url("../../assets/img/20190705121424.jpg") no-repeat top left
    background-size 5760px 1080px
    z-index -1

#air-radar::after
    content ''
    position absolute
    top 50px
    left 2279px
    width 811px
    height 162px
    background url("../../assets/img/airRadar/20190921102730.png") no-repeat top left
    background-size 811px 162px
    z-index 1
</style>
